<template>
	<view>
		<!-- <statusbar></statusbar>
		<view class="cha" @click="back">
			<image class="cha_icon" src="/static/img/back.png" mode=""></image>
		</view> -->
		<u-navbar :autoBack="true" @leftClick="back">
		</u-navbar>
		<view class="content">
			<view class="title">
				欢迎使用
			</view>
			<view class="smtitle">
				~立即注册.开启全新购物时代~
			</view>
			<view class="form">
				<u--input placeholder="请输入用户名" v-model="form.username" border='bottom'
					placeholderStyle='color:#999999;font-size:28rpx;' maxlength='11'></u--input>
				<u--input placeholder="请输入手机号" v-model="form.mobile" border='bottom'
					placeholderStyle='color:#999999;font-size:28rpx;' maxlength='11'></u--input>
				<view class="item" style="display: flex;justify-content: space-between;">
					<u--input placeholder="请输入验证码" v-model="form.code" border='none'
						placeholderStyle='color:#999999;font-size:28rpx;'>
					</u--input>
					<view class="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
						<u-button @tap="getCode" :text="tips" type="success"></u-button>
					</view>
				</view>
				<u-input border='bottom' :password='!pwstype' clearable placeholderStyle='color:#999999;font-size:28rpx'
					placeholder="请设置您的密码(6~20)" v-model="form.password">
					<template slot="suffix">
						<view class="" @click="pwstype=!pwstype">
							<u-icon v-if="!pwstype" name="eye-fill" color="#999" size="24"></u-icon>
							<u-icon v-else name="eye-off" color="#999" size="24"></u-icon>
						</view>
					</template>
				</u-input>
				<u--input placeholder="请输入邀请码(不必填）" v-model="form.pid" border='bottom'
					placeholderStyle='color:#999999;font-size:28rpx;' maxlength='11'></u--input>
			</view>
			<!-- <view class="tips">
				<view class="tip">
					注册账号
				</view>
				<view class="tip">
					忘记密码？
				</view>
			</view> -->
			<view class="btn">
				<view class="btn_box" @click="reg">
					立即注册
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		shortMsg,
		register
	} from '@/api/login.js'; // 引入api
	import util from '@/util/index.js';
	export default {
		data() {
			return {
				form: {
					mobile: '',
					password: '',
					code: '',
					pid: '',
					username: ''
				},
				pwstype: false,
				tips: '',
			};
		},
		methods: {
			setpwstype() {

			},
			back() {
				uni.navigateBack()
			},
			getCode() {
				// console.log(shortMsg)
				let _this = this
				if (!_this.form.mobile) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					})
					return
				}
				console.log(this.$refs.uCode.canGetCode)
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						shortMsg({
							mobile: _this.form.mobile,
							event: 'register'
						}).then(res => {
							console.log(res)
							if (res.data.code == 1) {
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							} else {
								uni.$u.toast(res.data.msg);
							}
						});

					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			reg() {
				// register
				// 判断必填项
				let {
					username,
					password,
					mobile,
					code,
					pid
				} = this.form
				// if()
				// console.log(username,password,mobile,code)
				if (!username) {
					uni.$u.toast('请输入您的用户名');
					return
				}
				if (!mobile) {
					uni.$u.toast('请输入您的手机号码');
					return
				}
				if (!code) {
					uni.$u.toast('请输入您收到的验证码');
					return
				}
				if (!password) {
					uni.$u.toast('请设置您的密码');
					return
				}
				register({
					username,
					password,
					mobile,
					code,
					pid
				}).then(res => {
					if (res.data.code == 1) {
						uni.$u.toast('注册成功')
						setTimeout(() => {
							uni.$u.route('/pages/login/login')
						}, 1000)
					} else {
						uni.$u.toast(res.data.msg)
					}
				})
			},
			back() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			getQueryString(url) {
				let ItemArr= [];
				let ItemObj = {};
				url
					.substring(url.lastIndexOf("?") + 1, url.length)
					.split("&")
					.map((item) => {
						ItemArr.push(item.split("="));
					});
				ItemArr.map((item) => {
					ItemObj[item[0]] = item[1];
				});
				return ItemObj;
			}
		},
		onLoad(option) {
			if (option.q) {
				const q = decodeURIComponent(option.q)
				uni.setStorageSync('pid', this.getQueryString(q).pid)
			}
			this.form.pid = uni.getStorageSync('pid')

		}
	}
</script>

<style lang="less">
	.cha {
		width: 24rpx;
		height: 38rpx;
		position: fixed;
		left: 49rpx;
		top: 52rpx;

		.cha_icon {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		padding-top: 196rpx;
		padding-bottom: 40rpx;
	}

	.title {
		text-align: center;
		font-size: 50.03rpx;
		color: #212121;
		font-weight: 800;
	}

	.smtitle {
		text-align: center;
		font-size: 32.02rpx;
		color: #999999;
		margin-top: 40rpx;
	}

	.form {
		padding: 30rpx 46rpx 42rpx;

		.u-input {
			padding: 86rpx 0 46rpx 7rpx !important;
		}

		.see_icon {
			width: 36rpx;
			height: 30rpx;
		}
	}

	.tips {
		display: flex;
		justify-content: space-between;
		padding: 0 56rpx;
		font-size: 28rpx;
		color: #000000;
	}

	.btn {
		padding: 77rpx 33rpx 0;

		.btn_box {
			line-height: 114rpx;
			background: linear-gradient(153deg, #FF8717, #FF5F00);
			border-radius: 57rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 36rpx;
			font-weight: 500;
		}
	}

	.item {
		border-bottom: 1rpx solid #dadbde;

		.suffix {
			align-self: flex-end;
			padding-bottom: 40rpx;

			.u-button {
				background-color: #FF7904;
			}
		}
	}
</style>